<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>模型管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">
    <style type="text/css">
        th {
            text-align: center;
            width: 150px;
            height: 30px;
            background-color: #f8f8f8;
        }

        td {
            height: 35px;
            text-align: center;

        }

        select {
            width: 100px;
        }

        .oaBtn {
            background: url(/dist/img/btn-bj2.png) repeat-y !important;
            background-size: 100% 100% !important;
            color: #fff !important;
        }
    </style>

</head>
<body>
<div id="app">
    <div id="select" style="position:relative; top:10px;">
        品牌
        <select id="testBran" v-model="brandId" @change="getMod">
            <option v-for="itemB in itemsBran" v-bind:value="itemB.id">{{itemB.brandName}}</option>
        </select>
        型号
        <select id="testMod" v-model="modelId">
            <option v-for="itemMo in itemsMod" v-bind:value="itemMo.modelId">{{itemMo.modelName}}</option>
        </select>

        <input type="text" id="likeSelect" v-model="modelName" placeholder="模糊查询" size="12">

        <input type="button" id="getBrand"  class="oaBtn" value="查询" @click="getByCon()"
               style=" width:60px;position:relative;left: 10px">

        <input type="button" id="addModel"  class="oaBtn" value="新增机型"  @click="saveModel()"
               style=" width:110px;position:relative;left: 150px;" >

    </div>

    <br>

    <div id="table" style="position:relative; top:10px;">
        <table border="1" style="border:1px solid #cbcbcd;">
            <tr>
                <th>品牌</th>
                <th>型号</th>
                <th>操作时间</th>
                <th>操作人员</th>
                <th style="  width: 80px;">操作</th>
            </tr>
            <tr v-for="item in items">
                <td>{{item.brandName}}</td>
                <td>{{item.modelName}}</td>
                <td>{{item.updateTime}}</td>
                <td>{{item.createUser}}</td>
                <td>
                    <a id="upd" @click="update(item.modelId)">
                        编辑</a> &nbsp;&nbsp;
                    <a id="del" @click="delModel(item.modelId)">删除</a>
                </td>
            </tr>
        </table>
        <div class="oa-pager text-center" style="margin-top: 5px;position:relative; left:-250px;">
            共
            <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
            <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
            <span class="oa-pager-button" id="first">首页</span>
            <span class="oa-pager-button" id="prev">上一页</span>
            <span class="oa-pager-button" id="next">下一页</span>
            <span class="oa-pager-button" id="last">尾页</span>
        </div>
    </div>

</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=63aed32f"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/apply/money/class.js"></script>
<script type="text/javascript" src="/dist/js/pages/system/systemService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/changeMoneyToChinese.js"></script>
<script type="text/javascript" src="/dist/plugins/print/print.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    //分页代码
    $.wyui.page.dataUrl = server.ip + "/deviceModel/getModelList.json";
    $.wyui.page.getByPage_callback = function (records) {
        console.log(records);
        app.items = records;
    };
    $.wyui.page.getByPage_scroll_callback = function (list) {
        if (list.length < 20) {
            isLoad = false;
        } else {
            for (var i = 0; i < list.length; i++) {
                app.list.push(list[i]);
            }
            isLoad = true;
        }
    };
    var app = new Vue({
        el: '#app',
        data: {
            items: [],
            isOk: '',
            brandId: '',
            modelId: '',
            modelName: '',
            itemsBran: '',
            itemsMod: '',
        },
        mounted: function () {
           /* var that = this;
            $.wyui.postMethod('/deviceModel/getModelList.json', {}, function (r) {
                console.log(r);
                that.items = r.records;
            })*/
            /*查询品牌下拉列表*/
            var that = this;
            $.wyui.postMethod('/deviceBrand/getBrandList.json', {}, function (r) {
                console.log(r);
                that.itemsBran = r.records;
            })

        },
        methods: {
            /*编辑信息*/
            update(id){
                $.dialog({
                    content: 'url:updateModel.html?id=' + id,
                    title: '编辑模型',
                    width: 400,
                    height: 250,
                    max: true,
                    min: true,
                    lock: true,
                });
            },
            /*删除*/
            delModel(id) {
                if (confirm('确认要删除吗？')) {
                    var that = this;
                    data = {'id': id};
                    $.wyui.postMethod('/deviceModel/delById.json', data, function (r) {
                        this.isOk = r.isOk;
                        if (this.isOk == true) {
                            location.href = "deviceModel.html";
                        } else {
                            "删除失败请重新操作"
                        }
                    });
                }
            },
            /*获取模型*/
            getMod(){
                var that = this;
                var s = that.brandId;
                var data = {'brandId': s};
                $.wyui.postMethod('/deviceModel/getModelList.json', data, function (r) {
                    console.log(r);
                    that.itemsMod = r.records;
                })
            },
            /*查询*/
            getByCon(){
                var that = this;
                var s1 = that.brandId;
                var s2 = that.modelId;
                var s3 = that.modelName;
                var data = {'brandId': s1, 'modelId': s2, 'modelName': s3};
                $.wyui.postMethod('/deviceModel/getModelList.json', data, function (r) {
                    console.log(r);
                    that.items = r.records;
                });
            },
            /*新增机型*/
            saveModel(){

                $.dialog({
                    content: 'url:saveModel.html',
                    title: '新增机型',
                    width: 400,
                    height: 300,
                    max: true,
                    min: true,
                    lock: true,
                });

            }

        }/*methods*/
    });
</script>
</body>
</html>